<template>
  <div class="app-container">
    <div class="user">
      <el-form ref="form" :model="formModel" class="form-container" label-width="100px" :rules="rules">
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="用户名：" prop="name">
              <el-input v-model="formModel.name" class="filter-item" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="手机：" prop="mobile">
              <el-input v-model="formModel.mobile" disabled class="filter-item" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="类型：" prop="type">
              <hey-select v-model="formModel.type" disabled clcd="userType" @change="genRoleOptions" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="角色：" prop="roleId">
              <el-select
                v-model="formModel.roleId"
                placeholder="请选择"
                disabled
              >
                <el-option
                  v-for="(label, value) of roleOptions"
                  :key="value"
                  :label="label"
                  :value="value * 1"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="备注：" prop="remarks ">
              <el-input
                v-model="formModel.remarks"
                :autosize="{ minRows: 2, maxRows: 4}"
                type="textarea"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <div class="text-center">
              <el-button @click="close">取消</el-button>
              <el-button type="primary" @click="handleSubmit()">确定</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'

export default {
  name: 'Profile',
  data() {
    return {
      roleOptions: {},
      formModel: {
        name: '',
        type: '',
        mobile: '',
        roleId: '',
        remarks: ''
      },
      rules: {}
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles'
    ]),
    ...mapState('login', [
      'userInfo'
    ])
  },
  created() {
  },
  mounted() {
    this.$form = this.$refs.form
    this.getUser()
    this.genRoleOptions(false)
    this.initRules()
  },
  methods: {
    initRules() {
      const NULL_TIP = this.CONST.NULL_TIP
      this.rules = {
        name: [{ required: true, message: NULL_TIP, trigger: ['change', 'blur'] }]
      }
      this.$nextTick(_ => {
        this.$form.clearValidate()
      })
    },
    getUser() {
      this.assignData(this.userInfo, this.formModel)
    },
    genRoleOptions(flag) {
      if (flag !== false) {
        this.formModel.roleId = ''
      }
      const param = {
        type: this.formModel.type
      }
      this.get('/user/listAuthRoleByTypeForNotPermission', param).then(ret => {
        this.roleOptions = ret
      }).catch(_ => {
        this.roleOptions = {}
      })
    },
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const { formModel } = this
          const param = { ...formModel }
          const tip = '修改成功！'
          this.$store.dispatch('login/editLoginUserInfo', param).then(res => {
            this.$info(tip, () => {
            })
          })
        }
      })
    },
    toLastView(visitedViews, view) {
      const latestView = visitedViews.slice(-1)[0]
      if (latestView) {
        this.$router.push(latestView)
      } else {
        // now the default is to redirect to the home page if there is no tags-view,
        // you can adjust it according to your needs.
        if (view.name === 'Dashboard') {
          // to reload home page
          this.$router.replace({ path: '/redirect' + view.fullPath })
        } else {
          this.$router.push('/')
        }
      }
    },
    isActive(route) {
      return route.path === this.$route.path
    },
    close() {
      const view = this.$route
      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
        if (this.isActive(view)) {
          this.toLastView(visitedViews, view)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .user {
    width: 1000px;
    margin: 0 auto;

    .line {
      height: 2px;
      background: #DCDFE6;
      margin-bottom: 30px;
    }

    .form-container {
      border: none;
    }

    .title {
      font-size: 18px;
      text-align: center;
      margin-bottom: 30px;
    }

    .mg-left-100 {
      margin-left: 100px;
    }
  }
</style>
